import React, { Component } from 'react';
import { connect } from 'dva';
import styles from './index.less';
import Icon from '@ant-design/icons/lib/components/Icon';

let condition = {
  total: {
    name: '项目总数',
    icon: require('@/images/pic1.png'),
    data: 99,
  },
  build: {
    name: '建设数量',
    icon: require('@/images/pic2.png'),
    data: 99,
  },
  service: {
    name: '服务类数量',
    icon: require('@/images/pic3.png'),
    data: 99,
  },
  publicService: {
    name: '公众服务类数量',
    icon: require('@/images/pic4.png'),
    data: 99,
  },
  innerService: {
    name: '内部办公类数量',
    icon: require('@/images/pic5.png'),
    data: 99,
  },
};
class Condition extends Component {
  constructor() {
    super();
    this.state = {
      name: 'Caroline',
      list: [],
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    // 获取首页数据
    dispatch({
      type: '$request/post',
      payload: {
        url: '/api/index/v1/statistics/count',
      },
    }).then(res => {
      let list = [];
      Object.keys(res).map(key => {
        let type = key.replace('Count', '');
        condition[type].data = res[key];
        list.push(condition[type]);
      });
      this.setState({
        list,
      });
    });
  }
  render() {
    const { name, list = [] } = this.state;
    // const { condition = [] } = this.props;
    // console.log('condition', this.props)
    return (
      <div className={styles.container}>
        {list &&
          list.map((item, index) => (
            <div key={index} className={styles.item}>
              <img src={item.icon} className={styles.icon}></img>
              <div>
                <div className={styles.title}>{item.name}</div>
                <div>
                  {' '}
                  <span className={styles.count}>{item.data}</span>人
                </div>
              </div>
            </div>
          ))}
      </div>
    );
  }
}
export default connect(state => state.base)(Condition);
